<template>
    <basic-container class="bidBusiHallList">
        <!-- <baseTable :tableData="options"></baseTable> -->
        <avue-crud :option="options"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               @row-del="rowDel"
               v-model="form"
               @row-save="rowSave"
               @row-update="rowSave"
               :upload-after="uploadAfter"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">

            <template slot-scope="{row,type}" slot="projectNameForm">
                <el-input v-if="type!='view'" v-model="form.projectName" placeholder="请输入采购项目名称"></el-input>
                <el-tooltip class="item" effect="dark" :content="form.projectName" placement="top-start">
                    <span v-if="type=='view'">{{form.projectName}}</span>
                </el-tooltip>
            </template>
               <template slot-scope="{row,index,type}" slot="menuForm">
                    <el-button type="primary"
                        icon="el-icon-add"
                        size="small"
                        v-if="type=='add'"
                        @click="$refs.crud.rowSave(row)"
                    >保存</el-button>
                    <el-button type="primary"
                        icon="el-icon-edit"
                        size="small"
                        v-if="type=='edit'"
                        @click="$refs.crud.rowUpdate(row)"
                    >修改</el-button>
                    <el-button
                     icon="el-icon-cancel"
                     size="small"
                     @click="$refs.crud.closeDialog()"
                    >取消</el-button>
                    <el-button
                    type="primary"
                     icon="el-icon-bell"
                     size="small"
                     v-if="type=='edit'||type=='add'"
                     @click.stop="publishAndSave(row,loading)"
                    >{{type=='edit'?'修改并发布':'保存并发布'}}</el-button>
               </template>
               <!-- <template slot="attachmentNameForm" slot-scope="{row,type}">
                   <p v-if="type=='view'">{{form.attachmentName}}</p>
               </template> -->
               <template slot="attachmentCodeForm" slot-scope="{row,type}">
                   <input  type="file" id="fileExport" multiple style="display: none;" @change="handleFileChange" ref="inputers">
                    <label v-if="type!='view'" class="inputLabel cursorD" for="fileExport">
                        <i class="activeColor el-icon-upload"></i>
                        选择文件
                    </label>
                    <p v-show="form.attachmentCode!=''" @mouseenter="type!='view'?closeShow=true:closeShow=false" @mouseleave="closeShow=false" class="cursorD bidBusiHallFileDiv">
                        <span :class="[{'activeColor':type=='view'}]" @click="type=='view'?downFile(form.attachmentCode):''">{{form.attachmentName}}</span>
                        <i class="el-icon-delete cursorD changeHover" v-show="closeShow" @click="removeFile"></i>
                    </p>
               </template>
                <template slot-scope="{row,index}" slot="menuBtn">
                    <el-dropdown-item>
                        <el-button size="mini" @click.stop="row.announcementType=='biddingAnnouncement'||row.announcementType=='purchaseAnnouncement'||row.announcementType=='prequalificationAnnouncement'?$refs.crud.rowView(row,index):seeView(row)" type="text" icon="el-icon-view">查看</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                    <el-button v-if="row.projectStatus==0" size="mini" @click.stop="$refs.crud.rowEdit(row)" type="text" icon="el-icon-edit">编辑</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                    <el-button v-if="row.projectStatus==0" size="mini" @click.stop="$refs.crud.rowDel(row)" type="text" icon="el-icon-delete">删除</el-button>
                    </el-dropdown-item>
                </template>
                <template slot="menu" slot-scope="{row}">
                    <el-button size="mini" v-if="row.projectStatus==0&&row.projectStatus!=3"  @click.stop="publish(row)" type="text" icon="el-icon-bell">发布</el-button>
                    <el-button size="mini" v-if="row.projectStatus!=0&&row.projectStatus!=3"  @click.stop="stop(row)" type="text" icon="el-icon-bell">停止</el-button>
                </template>
        </avue-crud>
        <my-drawer
            class="avue-dialog bidBusinessDrawer"
            :title="'查看'"
            :showDraw="viewShow"
            @close="viewShow=false"
            >
            <basic-container>
                <h2 style="text-align:center">{{form.announcementName}}</h2>
                <h5 style="text-align:center">【{{form.projectCode}}】</h5>
                <p class="tendereeClass" >【{{form.tenderee}}】<span style="color:#919191">{{form.releaseTime}}</span></p>
                <div class="wrapper" v-html="form.content"></div>
            </basic-container>
        </my-drawer>
    </basic-container>
</template>

<script>
import website from '../../config/website'
import baseTable from "./component/table.vue"
import { getList, add, del, release,uploadFile,stop } from '@/api/desk/bidBusinessHall'
import myDrawer from '../../components/drawer/myDrawer'
  import {formData} from "../../util/util";
import {validateEmail,isEmail,isMobile,isPhone} from '../../util/validate'
export default{
    data(){
        var validatePhone =(rule, value, callback)=>{
            if (value === '') {
                callback(new Error('请输入联系'));
            } else if (!isMobile(value)&&!isPhone(value)) {
                callback(new Error('请输入正确格式!'));
            } else {
                callback();
            }
        };

        var validateEmail =(rule, value, callback)=>{
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else if (!isEmail(value)) {
                callback(new Error('请输入正确格式!'));
            } else {
                callback();
            }
        };
        return{
            viewShow:false,
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            closeShow:false,
            data: [],
            file:'',
            fileName:'',
             options: {
                dialogClickModal:false,
                height: 'auto',
                labelWidth:'160',
                searchLabelWidth:'120',
                calcHeight: 30,
                tip: false,
                saveBtn:false,
                updateBtn:false,
                cancelBtn:false,
                searchShow: true,
                searchMenuSpan: 8,
                border: true,
                index: true,
                indexLabel:'序号',
                viewBtn: false,
                delBtn:false,
                selection: false,
                editBtn:false,
                excelBtn: false,
                menuType:'menu',
                menuBtnTitle:'自助',
                searchIcon:true,
                searchIndex:3,
                dialogType: website.dialogType,
                dialogDirection: website.dialogDirection,
                dialogWidth: website.dialogWidth,
                column: [
                    {
                        label: "公告名称",
                        prop: "announcementName",
                        span: 24,
                        row: true,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入通知标题",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "公告类型",
                        type: "select",
                        dicUrl: "/api/dis-sys/dict-biz/dictionary?code=announcement_type",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        slot: true,
                        prop: "announcementType",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入公告类型",
                            trigger: "blur"
                        }],
                        control:(val,form)=>{
                            if(val==''||(val=='biddingAnnouncement'||val=='purchaseAnnouncement'||val=='prequalificationAnnouncement')){
                                return{
                                    content:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    projectName:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    projectStatus:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:true
                                    },
                                    projectCode:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    purchaseType:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    deadline:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    startTime:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    bidOpeningAdd:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    tenderee:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    agency:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    agencyAdd:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    // post:{
                                    //     addDisplay:true,
                                    //     editDisplay:true,
                                    //     viewDisplay:true
                                    // },
                                    linkman:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    phone:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    email:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    projectIntroduction:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    attachmentCode:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    // attachmentName:{
                                    //     addDisplay:false,
                                    //     editDisplay:false,
                                    //     viewDisplay:true
                                    // }
                                }
                            }else{
                                return{
                                    content:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    projectName:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    projectStatus:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:true
                                    },
                                    projectCode:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    purchaseType:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    deadline:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    startTime:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    bidOpeningAdd:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    tenderee:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    agency:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    agencyAdd:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    // post:{
                                    //     addDisplay:false,
                                    //     editDisplay:false,
                                    //     viewDisplay:false
                                    // },
                                    linkman:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    phone:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    email:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    projectIntroduction:{
                                        addDisplay:false,
                                        editDisplay:false,
                                        viewDisplay:false
                                    },
                                    attachmentCode:{
                                        addDisplay:true,
                                        editDisplay:true,
                                        viewDisplay:true
                                    },
                                    // attachmentName:{
                                    //     addDisplay:false,
                                    //     editDisplay:false,
                                    //     viewDisplay:true
                                    // }
                                }
                            }
                        }
                    },
                    {
                        label: "采购项目状态",
                        type: "select",
                        dicData: [
                            {
                                label:'待发布',
                                value:'0'
                            },
                            {
                                label:'已发布',
                                value:'1'
                            },
                            {
                                label:'已截止',
                                value:'2'
                            },
                            {
                                label:'已停止',
                                value:'3'
                            },
                        ],
                        rules: [{
                            required: true,
                            message: "请选择采购项目状态",
                            trigger: "blur"
                        }],
                        span:12,
                        search:true,
                        prop: "projectStatus",
                    },
                    {
                        label: "发布时间",
                        prop: "releaseTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        searchRange:true,
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                    },
                    {
                        label: "采购项目名称",
                        type: "input",
                        rules: [{
                            required: true,
                            message: "请选择采购项目状态",
                            trigger: "blur"
                        }],
                        span:12,
                        hide:true,
                        formslot:true,
                        prop: "projectName",
                    },
                    {
                        label: "采购",
                        type: "input",
                        span:12,
                        search:true,
                        rules: [{
                            required: true,
                            message: "请输入采购项目编号",
                            trigger: "blur"
                        }],
                        prop: "projectCode",
                    },
                    {
                        label: "采购类型",
                        type: "select",
                        span:12,
                        dicUrl: "/api/dis-sys/dict-biz/dictionary?code=purchase_type",
                        props: {
                            label: "dictKey",
                            value: "dictValue"
                        },
                        rules: [{
                            required: true,
                            message: "请选择采购类型",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "purchaseType",
                    },
                    {
                        label: "招标文件获取截止时间",
                        type: "datetime",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请选择招标文件获取截止时间",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "deadline",
                    },{
                        label: "开标（截止）时间",
                        type: "datetime",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请选择开标（截止）时间",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "startTime",
                    },
                    {
                        label: "开标地址",
                        type: "input",
                        span:24,
                        rules: [{
                            required: true,
                            message: "请输入开标地址",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "bidOpeningAdd",
                    },{
                        label: "招标人",
                        type: "input",
                        span:12,
                        search:true,
                        rules: [{
                            required: true,
                            message: "请输入招标人",
                            trigger: "blur"
                        }],
                        prop: "tenderee",
                    },{
                        label: "招标代理机构",
                        type: "input",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请输入招标代理机构",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "agency",
                    },{
                        label: "招标代理机构地址",
                        type: "input",
                        span:24,
                        rules: [{
                            required: true,
                            message: "请输入招标代理机构地址",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "agencyAdd",
                    },
                    // {
                    //     label: "招标代理机构邮编",
                    //     type: "input",
                    //     span:12,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入招标代理机构邮编",
                    //         trigger: "blur"
                    //     },
                    //     {
                    //         validator: validatePost,
                    //         message: "请输入正确格式",
                    //         trigger: 'blur'
                    //     }
                    //     ],
                    //     hide:true,
                    //     prop: "post",
                    // },
                    {
                        label: "联系人",
                        type: "input",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请输入联系人",
                            trigger: "blur"
                        }],
                        hide:true,
                        prop: "linkman",
                    },{
                        label: "联系电话",
                        type: "input",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请输入联系电话",
                            trigger: "blur"
                        },
                        {
                            validator: validatePhone,
                            message: "请输入正确格式",
                            trigger: 'blur'
                        }],
                        hide:true,
                        prop: "phone",
                    },{
                        label: "电子邮箱",
                        type: "input",
                        span:12,
                        rules: [{
                            required: true,
                            message: "请输入电子邮箱",
                            trigger: "blur"
                        },{
                            validator: validateEmail,
                            message: "请输入正确格式",
                            trigger: 'blur'
                        }
                        ],
                        hide:true,
                        prop: "email",
                    },
                    {
                        label: "项目介绍",
                        type: "textarea",
                        hide: true,
                        minRows: 6,
                        row:true,
                        span: 24,
                        prop: "projectIntroduction",
                    },
                    {
                        label: "内容",
                        prop: "content",
                        component: 'AvueUeditor',
                        rules: [{
                            required: true,
                            message: "请输入公告内容",
                            trigger: "blur"
                        }],
                        options: {
                            action: '',
                            props: {
                            res: "data",
                            url: "link",
                            }
                        },
                        hide: true,
                        minRows: 6,
                        row:true,
                        span: 24,
                        addDisplay:false,
                        editDisplay:false,
                        viewDisplay:false
                    },
                    {
                        label: "公告文件",
                        type: 'upload',
                        loadText: '附件上传中，请稍等',
                        span:24,
                        hide:true,
                        prop: "attachmentCode",
                        multiple:false,
                        limit: 1,
                        formslot:true,
                        propsHttp: {
                            res: 'data',
                            url: 'path',
                            name:'fileName',
                            id:'code',
                        },
                        formslot:true,
                        rules: [{
                            required: true,
                            message: "请选择公告文件",
                            trigger: "change"
                        }],
                        action: '/api/sis-file/feign/file/yrFileUpload'
                    },
                    // {
                    //     label: "公告文件",
                    //     type: 'input',
                    //     span:24,
                    //     hide:true,
                    //     addDisplay:false,
                    //     editDisplay:false,
                    //     viewDisplay:true,
                    //     prop: "attachmentName",
                    // },
                ],
            },
        }
    },
    activated(){
        this.reloadCrud()
    },
    components:{
        baseTable,
        myDrawer
    },
    methods:{
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {releaseTime} = this.query;
        let values = {
          ...params,
        };
        if (releaseTime) {
          values = {
            ...params,
            beginTime: releaseTime[0],
            endTime: releaseTime[1],
            ...this.query
          };
          values.releaseTime = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        })
      },
      handleFileChange(e){
        let file = e.target.files[0]
        let data=formData({},file,'file')
        uploadFile(data).then(res=>{
            this.form.attachmentCode=res.data.data.fileId
            this.form.attachmentName=res.data.data.fileName
        })
        this.$refs.inputers.value = ''
      },
      removeFile(){
        this.form.attachmentCode=''
        this.form.attachmentName=''
      },
      uploadAfter(res, done, loading,column){
        this.file=res.fileId
        this.fileName = res.fileName
        done()
      },
      rowSave(form,done,loading){
          let params={
              ...form,
            //   attachmentCode:this.file,
            //   attachmentName:this.fileName
              }
        add(params).then(res=>{
          this.onLoad(this.page, this.query);
          done()
        }).catch(err=>{
          loading()
        })
      },
      seeView(row){
          if(row.announcementType=='biddingAnnouncement'||row.announcementType=='purchaseAnnouncement'||row.announcementType=='prequalificationAnnouncement'){
              this.$refs.crud.rowView((row,row.$index))
          }else{
              this.form = row
              this.viewShow=true
          }
      },
    downFile(id){
        downFile({id:id}).then(res=>{}).catch(err=>{})
    },
      publish(row,done,loading){
          release({id:row.id}).then(res=>{
          this.$message.success(res.data.msg)
              this.onLoad(this.page, this.query)
          }).catch(err=>{
              loading()
              done()
          })
      },
      publishAndSave(row,loading){
          let params={
              ...this.form,
              }
        add(params).then(res=>{
          this.publish(this.form)
          this.$message.success(res.data.msg)
          done()
        }).catch(err=>{
        })
      },
      rowDel(row){
        let th = this
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            del({id:row.id}).then(res=>{
              th.onLoad(th.page, th.query);
            }).catch(err=>{

            });
          })
      },
      reloadCrud() {
        this.$refs.crud.doLayout()
      },
      stop(row){
          stop(row.id).then(res=>{
            this.$message.success(res.data.msg)
            this.onLoad(this.page, this.query);
        }).catch(err=>{
            this.$message.success(res.data.msg)
        })
      }
    }
}
</script>
<style>
.wrapper{
  white-space: pre-wrap;
}
.tendereeClass{
    padding: 10px 0;
    text-align: center;
    border-top:1px dashed #eee ;
    border-bottom:1px dashed #eee ;
}
.bidBusiHallFileDiv{
    width:100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}
</style>
